/*
 * 基础样式
 */
html,body,p,h1,h2,h3,h4,h5,ul,ol,li{ padding:0px; margin:0px;}
ul,ol,li{ list-style:none; }
body, html {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
/*
 * layout 样式.viewroot
 */
.layout-main{
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
}



.single-frame-viewport{
	
	width:100%;
	height:100%;
	box-sizing:border-box;
	position:relative;
	z-index:99;
}

.single-frame-box{
	height:100%;
	width:100%;
	overflow:hidden;
}

.viewroot-box{
	position:absolute;
	width:100%;
	height:100%;
	background:#fff;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
  	-webkit-box-sizing: border-box;
  	padding-top:60px;
	box-sizing:border-box;
}
.viewroot{ 
	height:100%;
	position:relative;
	z-index:10;
}
.viewroot:before{
	content:'';
	display:block;
	clear:both;
	overflow:hidden;
	height:0px;
	width:0px;
}

/*  */
.single-frame-head{
	position:fixed;
	width:100%;
	height:60px;
	top:0px;
	left:0px;
	z-index:100;
}

.viewroot-bg{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:5;
}

.single-header-hide .viewroot-box{
	padding-top:0px;
}

@-webkit-keyframes default_forward_out{
	from{
		-webkit-transform:translate3d(0%,0,0);
	}
	to{
		-webkit-transform:translate3d(-100%,0,0);
	}
}

@-webkit-keyframes default_forward_in{
	from{
		-webkit-transform:translate3d(100%,0px,0px);
	}
	to{
		-webkit-transform:translate3d(0%,0px,0px);
	}
}

@-webkit-keyframes default_back_out{
	from{
		-webkit-transform:translate3d(0%,0px,0px);
	}
	to{
		-webkit-transform:translate3d(100%,0px,0px);
	}
}

@-webkit-keyframes default_back_in{
	from{
		-webkit-transform:translate(-100%,0px);
	}
	to{
		-webkit-transform:translate(0%,0px);
	}
}

/*********/

@keyframes default_forward_out{
	from{
		transform:translate3d(0%,0,0);
	}
	to{
		transform:translate3d(-100%,0,0);
	}
}

@keyframes default_forward_in{
	from{
		transform:translate3d(100%,0px,0px);
	}
	to{
		transform:translate3d(0%,0px,0px);
	}
}

@keyframes default_back_out{
	from{
		transform:translate3d(0%,0px,0px);
	}
	to{
		transform:translate3d(100%,0px,0px);
	}
}

@keyframes default_back_in{
	from{
		transform:translate(-100%,0px);
	}
	to{
		transform:translate(0%,0px);
	}
}

/**
 * 向前的离开
 */
.default_forward_out{
	-webkit-animation:default_forward_out .3s forwards ;
	animation:default_forward_out .3s forwards ;

}
/**
 * 向前的进入
 */
.default_forward_in{
	-webkit-animation:default_forward_in .3s forwards;
	animation:default_forward_in .3s forwards;
}
/**
 * 返回的离开
 */
.default_back_out{
	-webkit-animation:default_back_out .3s forwards ;
	animation:default_back_out .3s forwards ;
}
/**
 * 返回的进入
 */
.default_back_in{
	-webkit-animation:default_back_in .3s forwards;
	animation:default_back_in .3s forwards;
}

/*** updown transition start****/

@-webkit-keyframes updown_forward_out{
	from{
		-webkit-transform:translate3d(0,0%,0);
	}
	to{
		-webkit-transform:translate3d(0,-100%,0);
	}
}

@-webkit-keyframes updown_forward_in{
	from{
		-webkit-transform:translate3d(0,100%,0);
	}
	to{
		-webkit-transform:translate3d(0,0%,0);
	}
}

@-webkit-keyframes updown_back_out{
	from{
		-webkit-transform:translate3d(0,0%,0px);
	}
	to{
		-webkit-transform:translate3d(0,100%,0px);
	}
}

@-webkit-keyframes updown_back_in{
	from{
		-webkit-transform:translate3d(0,-100%,0);
	}
	to{
		-webkit-transform:translate3d(0,0%,0);
	}
}

/*********/

@keyframes updown_forward_out{
	from{
		transform:translate3d(0,0%,0);
	}
	to{
		transform:translate3d(0,-100%,0);
	}
}

@keyframes updown_forward_in{
	from{
		transform:translate3d(0,100%,0);
	}
	to{
		transform:translate3d(0,0%,0);
	}
}

@keyframes updown_back_out{
	from{
		transform:translate3d(0,0%,0px);
	}
	to{
		transform:translate3d(0,100%,0px);
	}
}

@keyframes updown_back_in{
	from{
		transform:translate3d(0,-100%,0);
	}
	to{
		transform:translate3d(0,0%,0);
	}
}
/**
 * 向前的离开
 */
.updown_forward_out{
	-webkit-animation:updown_forward_out .3s forwards ;
	animation:updown_forward_out .3s forwards ;

}
/**
 * 向前的进入
 */
.updown_forward_in{
	-webkit-animation:updown_forward_in .3s forwards;
	animation:updown_forward_in .3s forwards;
}
/**
 * 返回的离开
 */
.updown_back_out{
	-webkit-animation:updown_back_out .3s forwards ;
	animation:updown_back_out .3s forwards ;
}
/**
 * 返回的进入
 */
.updown_back_in{
	-webkit-animation:updown_back_in .3s forwards;
	animation:updown_back_in .3s forwards;
}

/*** updown transition end ****/

/** header 动画 **/
@-webkit-keyframes header_forward_out{
	from{
		-webkit-transform:translate3d(0%,0,0);
		opacity:1;
	}
	30% {
		opacity:0.3;
	}
	to{
		-webkit-transform:translate3d(-50%,0,0);
		opacity:0;
	}
}

@-webkit-keyframes header_forward_in{
	from{
		-webkit-transform:translate3d(50%,0,0);
		opacity:0;
	}
	70% {
		opacity:0.3;
	}
	to{
		-webkit-transform:translate3d(0%,0,0);
		opacity:1;
	}
}

@-webkit-keyframes header_back_out{
	from{
		-webkit-transform:translate3d(0%,0,0);
		opacity:1;
	}
	30% {
		opacity:0.3;
	}
	to{
		-webkit-transform:translate3d(50%,0,0);
		opacity:0;
	}
}

@-webkit-keyframes header_back_in{
	from{
		-webkit-transform:translate3d(-50%,0,0);
		opacity:0;
	}
	70% {
		opacity:0.3;
	}
	to{
		-webkit-transform:translate3d(0%,0,0);
		opacity:1;
	}
}

/***********/
@keyframes header_forward_out{
	from{
		transform:translate3d(0%,0,0);
		opacity:1;
	}
	30% {
		opacity:0.3;
	}
	to{
		transform:translate3d(-50%,0,0);
		opacity:0;
	}
}

@keyframes header_forward_in{
	from{
		transform:translate3d(50%,0,0);
		opacity:0;
	}
	70% {
		opacity:0.3;
	}
	to{
		transform:translate3d(0%,0,0);
		opacity:1;
	}
}

@keyframes header_back_out{
	from{
		transform:translate3d(0%,0,0);
		opacity:1;
	}
	30% {
		opacity:0.3;
	}
	to{
		transform:translate3d(50%,0,0);
		opacity:0;
	}
}

@keyframes header_back_in{
	from{
		transform:translate3d(-50%,0,0);
		opacity:0;
	}
	70% {
		opacity:0.3;
	}
	to{
		transform:translate3d(0%,0,0);
		opacity:1;
	}
}

/**
 * 向前的离开
 */
.header_forward_out{
	-webkit-animation:header_forward_out .3s forwards ;
	animation:header_forward_out .3s forwards ;
}
/**
 * 向前的进入
 */
.header_forward_in{
	-webkit-animation:header_forward_in .3s forwards;
	animation:header_forward_in .3s forwards;
}
/**
 * 返回的离开
 */
.header_back_out{
	-webkit-animation:header_back_out .3s forwards ;
	animation:header_back_out .3s forwards ;
}
/**
 * 返回的进入
 */
.header_back_in{
	-webkit-animation:header_back_in .3s forwards;
	animation:header_back_in .3s forwards;
}


.silky-box{ overflow:hidden;}
.silky-subbox{ display:table;}
.silky-scrollbarx,.silky-scrollbary{ background:#000; opacity:0.5; overflow:hidden; position:absolute; border-radius:5px;}
.silky-scrollbarx{ left:0px; bottom:0px; height:5px; width:5px;}
.silky-scrollbary{ right:0px; top:0px; height:5px; width:5px;}
.silky-letgo{ 
	/*-transition:all .5s ease-in;
	-webkit-transition:all .05s ease-in;
	-moz-transition:all .05s ease-in;*/
}

/**
 * ui部分的样式
 */
.ui-root{

}

.ui-layer{
	position:fixed;
	background:#fff;
	left:50%;
	top:50%;
}

.ui-mask{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.3);
}

.ui-mask-not-opacity{
	background:rgb(0,0,0);
}


.ui-dialog,.ui-toast{

}

.ui-dialog{
	width:200px;
	border-radius:5px;
}
.ui-dialog-padding{
	box-sizing:border-box;
	padding:5px;
}

.ui-dialog-head{
	height:1.5em;
	line-height:1.5em;
}

.ui-dialog-content{
	padding:10px 0px;
	line-height:1.5em;
}

.ui-dialog-buttons{
	text-align:center;
}

.ui-dialog-buttons button{
	margin:0px 5px;
}

.ui-toast{
	border-radius:5px;
	padding:10px;
	max-width:80%;
	min-width:10%;
}

.ui-loading{
	width:100px;
	height:100px;
	border-radius:50%;
	border:4px solid #fff;
	border-width:0px 0px 4px 4px;
	background:rgba(0,0,0,0.2);
	-webkit-animation:loading_rotate 0.6s linear infinite;
}

@-webkit-keyframes loading_rotate{
	from{
		-webkit-transform:rotate(0deg);
	}
	to{
		-webkit-transform:rotate(360deg);
	}
}

.ui-loading:after{
}

.ui-slide-box{
	overflow:hidden;
	height:100%;
	position:relative;
}
.ui-slide-sub-box{
	height:100%;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
	
}
.ui-slide-trans{
	-webkit-transition:all ease 0.2s;
	transition:all ease 0.2s;
}
.ui-slide-item{
	height:100%;
	float:left;
}
.ui-slide-nav{
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	text-align:center;
}
.ui-slide-nav span{ margin:5px; width:10px; height:10px; border-radius:5px; display:inline-block; background:#999;}
.ui-slide-nav span.ui-slide-cur-nav{ background:#eee;}

.block-view{ display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; }
.cur-block-view{ display:block;}





